<template>
  <div class="v-title">
    <div class="v-title-left">
      <div v-if="required" class="v-title-required">*</div>
      <v-icon :value="props.icon" :size="props.size ? props.size + 'px' : ''" class="v-title-icon" />
      <div v-if="props.text" class="v-title-text" :style="{ 'font-size': props.size ? props.size + 'px' : '' }">{{
        props.text
      }}</div>
      <slot></slot>
    </div>
    <div class="v-title-right">
      <slot name="right"></slot>
    </div>
  </div>
</template>
<script setup>
  import { onMounted, onUnmounted } from 'vue'
  defineOptions({ name: 'v-title' })
  import { VIcon } from '@v-model/shared--modules'

  const props = defineProps({
    text: [String, undefined],
    icon: {
      type: String,
      default: 'Tickets',
    },
    size: [String, Number],
    required: {
      type: Boolean,
      default: false,
    },
  })

  onMounted(() => {})

  onUnmounted(() => {})
</script>
<style scoped rel="stylesheet/scss" lang="scss">
  .v-title {
    display: flex;
    display: inline-flex;
    display: -webkit-flex;
    /* Safari */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    font-size: var(--v-base-font-size);
    font-weight: bold;
    border-bottom: 0.5px solid #409eff;
    padding-top: 2px;
    padding-bottom: 2px;
    border-color: var(--theme-color);
  }
  .v-title-required {
    color: red;
    margin-right: 6px;
  }
  .v-title-left {
    display: flex;
    display: inline-flex;
    display: -webkit-flex;
    /* Safari */
    justify-content: flex-start;
    align-items: center;
  }
  .v-title-right {
    display: flex;
    display: inline-flex;
    display: -webkit-flex;
    /* Safari */
    justify-content: flex-start;
    align-items: center;
  }
  .v-title-icon {
    font-size: var(--v-base-font-size);
    color: var(--theme-color);
    margin-right: 2px;
  }
  .v-title-text {
    display: inline-block;
    font-size: var(--v-base-font-size);
    color: #303133;
  }
</style>
